<!DOCTYPE html>
<html lang="en" style="height: 100%" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <script src="/js/jQuery.min.js"></script>
    <script src="/js/plugins/toastr/toastr.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <script src="/bootstrap/js/bootstrap-editable.js"></script>
    <script src="/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="/bootstrap/js/bootstrap-table-zh-CN.js"></script>
    <script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="/js/hplus.js?v=2.2.0"></script>
    <script src="/js/plugins/pace/pace.min.js"></script>

    <script src="/js/index.js"></script>
    <script src="/js/user.js"></script>

    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/css/plugins/morris/morris-0.4.3.min.css">
    <link rel="stylesheet" href="/js/plugins/gritter/jquery.gritter.css">
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css">
    <style>
        .modal-open{
            overflow-y: scroll;
        }

        .toast-center-center {
            left: 50%;
            top: 15%;
            transform: translate(-50%,-50%);
        }

        .pagination-detail {
            margin-left: 20px;
        }

        .float-e-margins .btn {
            margin-bottom: 0px;
        }

        #usersTable tr {
            text-align: center;
            font-size: 15px;
            font-family: 微软雅黑;
            background-color: seashell;
        }

        #usersTable tr:hover {
            background-color: #E6E1DC;
        }
    </style>
</head>
<body>
//<div id="wrapper">
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>用户管理</h5>
                        </div>
                        <div class="ibox-content" style="padding: 0">
                            <div id="fixed-table-toolbar" style="padding:0;margin: 0">
                                <div class="form-group" style="float: right;width: 100%;margin-top: 10px">
                                    <form role="form" class="form-inline">
                                        <div class="form-group" style="margin-top: 5px;margin-left: 20px">
                                            <input type="text" class="form-control" id="search_name" placeholder="请输入姓名">
                                            <button type="button" class="btn btn-primary" id="search" style="margin-left: 10px">
                                                <span class="glyphicon glyphicon-search"></span>
                                            </button>
                                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#insertModel" style="margin-left: 10px">
                                                <span class="glyphicon glyphicon-plus"></span>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <table id="usersTable" class="table table-hover table-condensed"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--增加按钮-->
<div class="modal fade" id="insertModel" aria-labelledby="insertModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h5 class="modal-title" id="insertModalLabel">新增用户</h5>
            </div>
            <form id="insertFormData" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-lg-2" for="insertUserName">姓名</label>
                        <div class="col-lg-9">
                            <input type="text" id="insertUserName" name="insertUserName" placeholder="" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2" for="insertPassword">密码</label>
                        <div class="col-lg-9">
                            <input type="password" id="insertPassword" name="insertPassword" placeholder="" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2" for="insertRoleId">角色</label>
                        <div class="col-lg-9">
                            <select class="form-control" id="insertRoleId" name="insertRoleId">
                                <option selected="selected" value=""></option>
                                <option th:each="role:${roles}" th:value="${role.id}" th:text="${role.name}"></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" data-dismiss="modal">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                    <button class="btn btn-success" type="button" id="insertBtn">
                        <span class="glyphicon glyphicon-ok"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--删除按钮-->
<div class="modal fade" id="deleteModel" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h5 class="modal-title" id="deleteModalLabel">删除用户</h5>
            </div>
            <div class="modal-body">
                该操作不可逆，确定要删除吗？
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" type="button" data-dismiss="modal">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
                <button class="btn btn-success" type="button" id="deleteBtn">
                    <span class="glyphicon glyphicon-ok"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<!--修改模态框-->
<div class="modal fade" id="updateModel" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="updateModalLabel" style="font-family: 微软雅黑">修改用户信息</h3>
            </div>
            <form id="formData" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-lg-2" for="updateUserId">编号</label>
                        <div class="col-lg-9">
                            <input type="text" id="updateUserId" name="updateUserId" placeholder="" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2" for="updateUserName">姓名</label>
                        <div class="col-lg-9">
                            <input type="text" id="updateUserName" name="updateUserName" placeholder="" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2" for="updateRoleId">角色</label>
                        <div class="col-lg-9">
                            <select class="form-control" id="updateRoleId" name="updateRoleId">
                                <option selected="selected" value="0"></option>
                                <option th:each="role:${roles}" th:value="${role.id}" th:text="${role.name}"></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" data-dismiss="modal">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                    <button class="btn btn-success" type="button" id="updateBtn">
                        <span class="glyphicon glyphicon-ok"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
